  <template>
  <div class="preOrder">
    <el-table :data="currentChargeproduct" style="width: 100%">
      <el-table-column prop="date" label="充值产品" align="center">
          <template v-slot="{row}">
              <img style="vertical-align:middle" :src="row.imageUrl" width="40%" alt="">
              <span style="color:#f4c14f">{{row.productName}}</span>
              <br>
              <span>{{row.description}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="price" label="单价" align="center"> </el-table-column>
      <el-table-column prop="address" label="数量" align="center">
          <template v-slot="{row}">
              <el-input-number v-model="row.quantity" @change="quantityChange(row)" size="mini" label="描述文字"></el-input-number>
          </template>
      </el-table-column>
      <el-table-column prop="address" label="小计" align="center">{{total_fee}}</el-table-column>
    </el-table>
    <div class="total_fee">
        <div class="box-wrap">
            <div class="box-shadow">
                <span class="realpay-title">实付款：</span>
                <span>￥</span>
                <span>{{total_fee}}</span>
                <div class="order-description">
                    <span>充值详情：</span>
                    <span></span>
                    <div class="user">
                        <span>充值账户:</span>
                    </div>
                    <button @click="commitOrder">提交订单</button>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
    import {mapState,mapMutations} from "vuex"
    import * as api from "../../../api/index"
    export default{
        data(){
            return{
               total_fee: 0,//总价
               quantity: 1//默认数量
            }
        },
        computed:{
            ...mapState(['currentChargeproduct']),
        },
        methods:{
            ...mapMutations(['SET_ORDER_ID']),
            quantityChange(row) {
                console.log(row);
                this.total_fee=row.quantity*row.price
            },
            commitOrder(){
                let product_id = this.currentChargeproduct[0].product_id
                let quantity = this.quantity
                api.preOrder(product_id,quantity)
                .then(res=>{
                    if(res.data.state){
                        let order_id = res.data.order_id
                        this.$router.push({name:"pay"})
                        this.SET_ORDER_ID(order_id)
                    }else{
                        this.$message.console.error(('订单提交失败'));
                    }
                })
            }
        }
    }
</script>
